import React from 'react'
class ComC extends React.Component {
    state = {
        count: 0,
        list: [{id:1,name:'wgy'},{id:2,name:'cz'}],
        person: {
            name: 'jack',
            age: 18
        }
    }
    change = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    addList=(item)=>{
        this.setState({
            list:[...this.state.list,item]
        })
    }
    filterList=(id)=>{
        this.setState({
            list:this.state.list.filter(el=>el.id!==id)
        })
    }
    changeList=(item)=>{
        this.setState({
            list:this.state.list.map(el=>{
                if(el.id===item.id){
                    return  item
                }else{
                    return el
                }
            })
        })
    }
    changebj=(name)=>{
        this.setState({
            person:{...this.state.person,name}
        })
    }
    render() {
        return (
            <div>  
                <div>{this.state.count}</div>
                <button onClick={this.change}>改变状态</button>
                {this.state.list.map(el=><div key={el.id}>{el.name}</div>)}
                <button onClick={()=>this.addList({id:3,name:'cxx'})}>数组添加</button>
                <button onClick={()=>this.filterList(3)}>数组删除</button>
                <button onClick={()=>this.changeList({id:1,name:'cmy'})}>数组修改</button>
                <div>对象name:{this.state.person.name},age:{this.state.person.age}</div>
                <button onClick={()=>this.changebj('wgy')}>改变对象</button>
            </div>

        )
    }
}
export class Test6 extends React.Component {
    render() {
        return (
            <div className="area">
                <h1>6.组件状态</h1> 
                <ComC />
            </div>
        )
    }
}